<template>
  <div class="formal-detail-view view-container">

    <header-module left-custom padding>
      <template #left-con>
        <div>
          {{ datas.terminalName }}
          <el-tag v-if="datas.standardStatus == 1" type="warning" size="small">正常交易</el-tag>
          <el-tag v-else type="warning" size="small">终止交易</el-tag>
        </div>
      </template>

      <template #btn>
        <el-button class="main-btn" size="small" type="primary" @click="onBack">返回</el-button>
        <el-button v-if="datas.standardStatus == 1" class="main-btn" size="small" type="primary" @click="endClick">终止交易</el-button>
        <!--                <el-button class="main-btn" size="small" type="primary" v-if="datas.standardStatus == 1" @click="onChange">交易变更</el-button>-->
      </template>

    </header-module>

    <div class="main-content">

      <item-title title="终端信息" />

      <terminal-info-view :datas="datas" />

      <item-title title="产品信息" />

      <product-info-view :datas="datas" />

      <item-title title="渠道客户信息" />

      <agent-info-view :datas="datas" />

      <item-title title="配送信息" />

      <distributor-info-view :datas="datas" />

      <item-title title="修改记录" style="margin-top: 20px" />

      <operation-view :id="datas.devId" mode="dev" />
    </div>

    <change-dialog ref="refChange" />

  </div>
</template>

<script>
import changeDialog from './modules/changeDialog/index.vue'
import terminalInfoView from './modules/terminalInfoView.vue'
import productInfoView from './modules/productInfoView.vue'
import agentInfoView from './modules/agentInfoView.vue'
import distributorInfoView from './modules/distributorInfoView.vue'
import {useRoute, useRouter} from 'vue-router'
import {defineComponent, getCurrentInstance, inject, onBeforeMount, reactive, toRefs} from 'vue'

export default defineComponent({
  name: 'Index',
  components: { distributorInfoView, agentInfoView, productInfoView, terminalInfoView, changeDialog },
  setup(props, {}) {
    const currentInstance = getCurrentInstance()
    const route = useRoute()
    const router = useRouter()
    const api = inject('api')
    var data = reactive({
      datas: {},
      refChange: null,

    })

    const getData = (id) => {
      api.supplyChannels.SUPPLY_CHANNELS_FORMAL_DETAIL(id).then(res => {
        if (!res.code && res.data) {
          data.datas = res.data.relationStandard
        }
      })
    }

    const onChange = () => {
      data.refChange.openDialog()
    }

    const onBack = () => {
      router.back()
    }

    const endClick = () => {
      currentInstance.proxy
        .alertBox({
          message: '是否确认终止该交易？',
          title: '终止交易',
        })
        .then(() => {
          api.signedAgent.TRADING_TERMINAL_END(data.datas.id).then(res => {
            if (!res.code) {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: '操作成功',
              })

              getData(route.query.id)
            } else {
              currentInstance.proxy.customMessage({
                type: 'error', message: res.msg
              })
            }
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    onBeforeMount(() => {
      if (route.query.id) {
        getData(route.query.id)
      }
    })

    return {
      ...toRefs(data),

      onBack,
      onChange,
      endClick,
    }
  }
})
</script>

<style lang="scss">
    @import "@/style/basics.scss";
    .formal-detail-view{

    }

</style>
